<!doctype html><html class="" data-reactroot=""><head>
<meta data-react-helmet="true" charset="utf-8"/><meta data-react-helmet="true" http-equiv="x-ua-compatible" content="ie=edge"/><meta data-react-helmet="true" name="description" content="自建网站，方便自己查阅"/><meta data-react-helmet="true" name="viewport" content="width=device-width, initial-scale=1"/><meta data-react-helmet="true" property="og:title" content="React-router5 中文文档"/><meta data-react-helmet="true" property="og:description" content="自建网站，方便自己查阅"/><meta data-react-helmet="true" property="og:type" content="article"/><meta data-react-helmet="true" name="twitter:card" content="summary"/>
<title data-react-helmet="true">React-router5 中文文档</title>
<link data-react-helmet="true" rel="stylesheet" href="/react_router_chinese/assets/index.css"/><link data-react-helmet="true" id="prismTheme" rel="stylesheet" href="/react_router_chinese/assets/prism.css"/>
<script data-react-helmet="true" >
    const shouldSetIsDark = document.cookie.includes('is_dark=1') ? true : document.cookie.includes('is_dark=0') ? false : window.matchMedia('(prefers-color-scheme: dark)').matches;
    if (shouldSetIsDark) {
      document.documentElement.classList.add('is_dark');
      document.getElementById('prismTheme').href = "/react_router_chinese/assets/prism_tomorrow.css";
    }
  </script>
</head><body><header><h1 class="hide_on_mobile"><a href="/react_router_chinese/">React-router5 中文文档</a></h1><nav><ul><li class="show_on_mobile flex_center"><a class="czs-menu-l" href="#" style="background-image:url(&quot;/react_router_chinese/assets/czs-menu-l.svg&quot;)"></a></li><li class="show_on_mobile"><h1 class="mobile_title"><a href="/react_router_chinese/">React-router5 中文文档</a></h1></li><li style="flex-grow:1"></li><li class="flex_center"><a class="czs-github-logo" href="https://github.com/frisktale/react_router_chinese" target="_blank" style="background-image:url(&quot;/react_router_chinese/assets/czs-github-logo.svg&quot;)"></a></li><li class="toggle_dark flex_center"><span class="czs-sun" style="background-image:url(&quot;/react_router_chinese/assets/czs-sun.svg&quot;)"></span><span class="czs-sun-l" style="background-image:url(&quot;/react_router_chinese/assets/czs-sun-l.svg&quot;)"></span><span class="czs-moon" style="background-image:url(&quot;/react_router_chinese/assets/czs-moon.svg&quot;)"></span><span class="czs-moon-l" style="background-image:url(&quot;/react_router_chinese/assets/czs-moon-l.svg&quot;)"></span></li></ul></nav></header><aside class="sidebar"><ol class="list_style_none"><li class="unfold"><a href="/react_router_chinese/guides/QuickStart.html" class="nav_link active">文档<span class="czs-angle-up-l" style="background-image:url(&quot;/react_router_chinese/assets/czs-angle-up-l.svg&quot;)"></span><span class="czs-angle-down-l" style="background-image:url(&quot;/react_router_chinese/assets/czs-angle-down-l.svg&quot;)"></span></a><ol class="list_style_none" style="height:auto"><li class=""><a href="/react_router_chinese/guides/QuickStart.html" class="nav_link active">快速开始</a></li><li class=""><a href="/react_router_chinese/guides/BasicComponents.html" class="nav_link">基础组件</a></li><li class=""><a href="/react_router_chinese/guides/ServerRendering.html" class="nav_link">服务端渲染</a></li><li class=""><a href="/react_router_chinese/guides/CodeSplitting.html" class="nav_link">代码拆分</a></li><li class=""><a href="/react_router_chinese/guides/ScrollRestoration.html" class="nav_link">滚动恢复</a></li><li class=""><a href="/react_router_chinese/guides/Philosophy.html" class="nav_link">设计思想</a></li><li class=""><a href="/react_router_chinese/guides/Testting.html" class="nav_link">测试</a></li><li class=""><a href="/react_router_chinese/guides/ReduxIntegration.html" class="nav_link">集成 Redux</a></li><li class=""><a href="/react_router_chinese/guides/StaticRouter.html" class="nav_link">静态路由</a></li></ol></li><li class=""><a href="/react_router_chinese/API/API.html" class="nav_link">API</a></li></ol></aside><section class="main"><div class="main_article"><article><h2 id="%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B">快速开始<a class="anchor" href="#%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B">§</a></h2>
<p>你需要一个React web app 来添加react-router。</p>
<p>如果你需要创建一个新的React Web App,最容易的方式是通过一个叫做<a href="https://github.com/facebook/create-react-app">create-react-app</a>的官方脚手架来创建。</p>
<p>第一步是先来安装<a href="https://github.com/facebook/create-react-app">create-react-app</a>,如果你以及安装过这个工具，那么可以直接使用她来创建一个新的项目。</p>
<pre class="language-autoit"><code class="language-autoit">npm install <span class="token operator">-</span>g create<span class="token operator">-</span>react<span class="token operator">-</span>app
create<span class="token operator">-</span>react<span class="token operator">-</span>app demo<span class="token operator">-</span>app
cd demo<span class="token operator">-</span>app
</code></pre>
<h3 id="%E5%AE%89%E8%A3%85">安装<a class="anchor" href="#%E5%AE%89%E8%A3%85">§</a></h3>
<p>React Router Dom 已经被发布到来npm上, 所以你可以用npm或yarn来安装她。</p>
<pre class="language-autoit"><code class="language-autoit">npm install react<span class="token operator">-</span>router<span class="token operator">-</span>dom
</code></pre>
<h3 id="%E7%A4%BA%E4%BE%8B%E5%9F%BA%E7%A1%80%E8%B7%AF%E7%94%B1">示例：基础路由<a class="anchor" href="#%E7%A4%BA%E4%BE%8B%E5%9F%BA%E7%A1%80%E8%B7%AF%E7%94%B1">§</a></h3>
<p>在这个例子中，我们会使用<Router>来构建一个拥有3个页面的示例。
注意: 我们用 &lt; Link to=&quot;/&quot;&gt; 来代替 &lt; a href=&quot;/&quot;&gt;</p>
<p>把下方的代码复制到demo-app里面的src目录下的App.js文件中</p>
<pre class="language-autoit"><code class="language-autoit">import React from <span class="token string">"react"</span><span class="token comment">;</span>
import { BrowserRouter as Router<span class="token punctuation">,</span> Route<span class="token punctuation">,</span> Link } from <span class="token string">"react-router-dom"</span><span class="token comment">;</span>

function <span class="token function">Index</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
  return <span class="token operator">&lt;</span>h2<span class="token operator">></span>Home<span class="token operator">&lt;</span><span class="token operator">/</span>h2<span class="token operator">></span><span class="token comment">;</span>
}

function <span class="token function">About</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
  return <span class="token operator">&lt;</span>h2<span class="token operator">></span>About<span class="token operator">&lt;</span><span class="token operator">/</span>h2<span class="token operator">></span><span class="token comment">;</span>
}

function <span class="token function">Users</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
  return <span class="token operator">&lt;</span>h2<span class="token operator">></span>Users<span class="token operator">&lt;</span><span class="token operator">/</span>h2<span class="token operator">></span><span class="token comment">;</span>
}

function <span class="token function">AppRouter</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
  return <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>Router<span class="token operator">></span>
      <span class="token operator">&lt;</span>div<span class="token operator">></span>
        <span class="token operator">&lt;</span>nav<span class="token operator">></span>
          <span class="token operator">&lt;</span>ul<span class="token operator">></span>
            <span class="token operator">&lt;</span>li<span class="token operator">></span>
              <span class="token operator">&lt;</span>Link <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/"</span><span class="token operator">></span>Home<span class="token operator">&lt;</span><span class="token operator">/</span>Link<span class="token operator">></span>
            <span class="token operator">&lt;</span><span class="token operator">/</span>li<span class="token operator">></span>
            <span class="token operator">&lt;</span>li<span class="token operator">></span>
              <span class="token operator">&lt;</span>Link <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/about/"</span><span class="token operator">></span>About<span class="token operator">&lt;</span><span class="token operator">/</span>Link<span class="token operator">></span>
            <span class="token operator">&lt;</span><span class="token operator">/</span>li<span class="token operator">></span>
            <span class="token operator">&lt;</span>li<span class="token operator">></span>
              <span class="token operator">&lt;</span>Link <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/users/"</span><span class="token operator">></span>Users<span class="token operator">&lt;</span><span class="token operator">/</span>Link<span class="token operator">></span>
            <span class="token operator">&lt;</span><span class="token operator">/</span>li<span class="token operator">></span>
          <span class="token operator">&lt;</span><span class="token operator">/</span>ul<span class="token operator">></span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>nav<span class="token operator">></span>

        <span class="token operator">&lt;</span>Route path<span class="token operator">=</span><span class="token string">"/"</span> exact component<span class="token operator">=</span>{Index} <span class="token operator">/</span><span class="token operator">></span>
        <span class="token operator">&lt;</span>Route path<span class="token operator">=</span><span class="token string">"/about/"</span> component<span class="token operator">=</span>{About} <span class="token operator">/</span><span class="token operator">></span>
        <span class="token operator">&lt;</span>Route path<span class="token operator">=</span><span class="token string">"/users/"</span> component<span class="token operator">=</span>{Users} <span class="token operator">/</span><span class="token operator">></span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>Router<span class="token operator">></span>
  <span class="token punctuation">)</span><span class="token comment">;</span>
}

export <span class="token keyword">default</span> AppRouter<span class="token comment">;</span>
</code></pre>
<h3 id="%E7%A4%BA%E4%BE%8B%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B1">示例：嵌套路由<a class="anchor" href="#%E7%A4%BA%E4%BE%8B%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B1">§</a></h3>
<p>这个示例向我们展示来嵌套路由如何工作，路由 '/topics'会加载Topics组件，这个组件会通过':id'的路由来渲染出更多的内容。</p>
<p>把下方的代码复制到demo-app里面的src目录下的App.js文件中</p>
<pre class="language-autoit"><code class="language-autoit">import React from <span class="token string">"react"</span><span class="token comment">;</span>
import { BrowserRouter as Router<span class="token punctuation">,</span> Route<span class="token punctuation">,</span> Link } from <span class="token string">"react-router-dom"</span><span class="token comment">;</span>

function <span class="token function">App</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
  return <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>Router<span class="token operator">></span>
      <span class="token operator">&lt;</span>div<span class="token operator">></span>
        <span class="token operator">&lt;</span>Header <span class="token operator">/</span><span class="token operator">></span>

        <span class="token operator">&lt;</span>Route exact path<span class="token operator">=</span><span class="token string">"/"</span> component<span class="token operator">=</span>{Home} <span class="token operator">/</span><span class="token operator">></span>
        <span class="token operator">&lt;</span>Route path<span class="token operator">=</span><span class="token string">"/about"</span> component<span class="token operator">=</span>{About} <span class="token operator">/</span><span class="token operator">></span>
        <span class="token operator">&lt;</span>Route path<span class="token operator">=</span><span class="token string">"/topics"</span> component<span class="token operator">=</span>{Topics} <span class="token operator">/</span><span class="token operator">></span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>Router<span class="token operator">></span>
  <span class="token punctuation">)</span><span class="token comment">;</span>
}

function <span class="token function">Home</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
  return <span class="token operator">&lt;</span>h2<span class="token operator">></span>Home<span class="token operator">&lt;</span><span class="token operator">/</span>h2<span class="token operator">></span><span class="token comment">;</span>
}

function <span class="token function">About</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
  return <span class="token operator">&lt;</span>h2<span class="token operator">></span>About<span class="token operator">&lt;</span><span class="token operator">/</span>h2<span class="token operator">></span><span class="token comment">;</span>
}

function <span class="token function">Topic</span><span class="token punctuation">(</span>{ match }<span class="token punctuation">)</span> {
  return <span class="token operator">&lt;</span>h3<span class="token operator">></span>Requested Param<span class="token punctuation">:</span> {match<span class="token punctuation">.</span>params<span class="token punctuation">.</span>id}<span class="token operator">&lt;</span><span class="token operator">/</span>h3<span class="token operator">></span><span class="token comment">;</span>
}

function <span class="token function">Topics</span><span class="token punctuation">(</span>{ match }<span class="token punctuation">)</span> {
  return <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>div<span class="token operator">></span>
      <span class="token operator">&lt;</span>h2<span class="token operator">></span>Topics<span class="token operator">&lt;</span><span class="token operator">/</span>h2<span class="token operator">></span>

      <span class="token operator">&lt;</span>ul<span class="token operator">></span>
        <span class="token operator">&lt;</span>li<span class="token operator">></span>
          <span class="token operator">&lt;</span>Link <span class="token keyword">to</span><span class="token operator">=</span>{`${match<span class="token punctuation">.</span>url}<span class="token operator">/</span>components`}<span class="token operator">></span>Components<span class="token operator">&lt;</span><span class="token operator">/</span>Link<span class="token operator">></span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>li<span class="token operator">></span>
        <span class="token operator">&lt;</span>li<span class="token operator">></span>
          <span class="token operator">&lt;</span>Link <span class="token keyword">to</span><span class="token operator">=</span>{`${match<span class="token punctuation">.</span>url}<span class="token operator">/</span>props<span class="token operator">-</span>v<span class="token operator">-</span>state`}<span class="token operator">></span>Props v<span class="token punctuation">.</span> State<span class="token operator">&lt;</span><span class="token operator">/</span>Link<span class="token operator">></span>
        <span class="token operator">&lt;</span><span class="token operator">/</span>li<span class="token operator">></span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>ul<span class="token operator">></span>

      <span class="token operator">&lt;</span>Route path<span class="token operator">=</span>{`${match<span class="token punctuation">.</span>path}<span class="token operator">/</span><span class="token punctuation">:</span>id`} component<span class="token operator">=</span>{Topic} <span class="token operator">/</span><span class="token operator">></span>
      <span class="token operator">&lt;</span>Route
        exact
        path<span class="token operator">=</span>{match<span class="token punctuation">.</span>path}
        render<span class="token operator">=</span>{<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token operator">&lt;</span>h3<span class="token operator">></span>Please <span class="token keyword">select</span> a topic<span class="token punctuation">.</span><span class="token operator">&lt;</span><span class="token operator">/</span>h3<span class="token operator">></span>}
      <span class="token operator">/</span><span class="token operator">></span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">></span>
  <span class="token punctuation">)</span><span class="token comment">;</span>
}

function <span class="token function">Header</span><span class="token punctuation">(</span><span class="token punctuation">)</span> {
  return <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>ul<span class="token operator">></span>
      <span class="token operator">&lt;</span>li<span class="token operator">></span>
        <span class="token operator">&lt;</span>Link <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/"</span><span class="token operator">></span>Home<span class="token operator">&lt;</span><span class="token operator">/</span>Link<span class="token operator">></span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>li<span class="token operator">></span>
      <span class="token operator">&lt;</span>li<span class="token operator">></span>
        <span class="token operator">&lt;</span>Link <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/about"</span><span class="token operator">></span>About<span class="token operator">&lt;</span><span class="token operator">/</span>Link<span class="token operator">></span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>li<span class="token operator">></span>
      <span class="token operator">&lt;</span>li<span class="token operator">></span>
        <span class="token operator">&lt;</span>Link <span class="token keyword">to</span><span class="token operator">=</span><span class="token string">"/topics"</span><span class="token operator">></span>Topics<span class="token operator">&lt;</span><span class="token operator">/</span>Link<span class="token operator">></span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>li<span class="token operator">></span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>ul<span class="token operator">></span>
  <span class="token punctuation">)</span><span class="token comment">;</span>
}

export <span class="token keyword">default</span> App<span class="token comment">;</span>
</code></pre></article></div><aside class="main_toc_container nav_link_container"><div class="main_toc"><nav class="toc"><ol><li><a href="#%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B">快速开始</a><ol><li><a href="#%E5%AE%89%E8%A3%85">安装</a></li><li><a href="#%E7%A4%BA%E4%BE%8B%E5%9F%BA%E7%A1%80%E8%B7%AF%E7%94%B1">示例：基础路由</a></li><li><a href="#%E7%A4%BA%E4%BE%8B%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B1">示例：嵌套路由</a></li></ol></li></ol></nav></div></aside></section><footer>Powered by&amp;nbsp;<a href="https://github.com/xcatliu/pagic" target="_blank">Pagic</a></footer><div class="tools flex_center hide_on_mobile"><a class="czs-pen button" href="https://github.com/frisktale/react_router_chinese/edit/master/./guides/QuickStart.md" target="_blank" style="background-image:url(&quot;/react_router_chinese/assets/czs-pen.svg&quot;)"></a><a class="czs-angle-up-l button" href="#" style="background-image:url(&quot;/react_router_chinese/assets/czs-angle-up-l.svg&quot;)"></a></div><script src="https://cdn.pagic.org/react@17.0.2/umd/react.production.min.js"></script><script src="https://cdn.pagic.org/react-dom@17.0.2/umd/react-dom.production.min.js"></script><script type="module" src="/react_router_chinese/index.js"></script></body></html>